<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-form :inline="true" ref="deviceForm" :model="queryParams">
        <el-form-item>
          <el-input clearable placeholder="请输入设备地点" v-model="queryParams.deviceAddress"></el-input>
        </el-form-item>
        <el-form-item class="searchBtn">
          <el-button type="primary" @click="searchQuery">查询</el-button>
        </el-form-item>
        <el-radio-group v-model="ListOrCard" class="searchRight" style="margin-bottom: 20px;">
          <el-radio-button label="list">列表</el-radio-button>
          <el-radio-button label="card">卡片</el-radio-button>
        </el-radio-group>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <!-- 列表 -->
      <div v-if="ListOrCard === 'list'">
        <el-table :data="tableData" style="width: 100%" row-key="userNo">
          <el-table-column type="index" label="序号" width="100"></el-table-column>
          <el-table-column prop="deviceNo" label="设备编号"></el-table-column>
          <el-table-column prop="deviceName" label="设备名称"></el-table-column>
          <el-table-column prop="deviceAddress" label="地点"></el-table-column>
          <el-table-column prop="deviceState" label="是否在线">
            <template slot-scope="scope">
              {{ deviceStatusEnum[scope.row.status] }}
            </template>
          </el-table-column>
          <!-- 空调控制列 -->
          <el-table-column prop="tempCtrl" label="温度控制" width="280">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.uploadData.modeMap"
                @change="handleTemCtrl(row, 'temp')"
                active-color="#ff4949"
                active-text="制热"
                inactive-text="制冷"
                inactive-color="#1AE1E6"
                :disabled="row.uploadData.onoff === null || row.uploadData.onoff === 0">
              </el-switch>
              <el-input-number
                size="mini"
                style="margin-left: 10px"
                v-model="row.uploadData.temp"
                controls-position="right"
                @change="handleTemCtrl(row, 'tempValue')"
                :min="20"
                :max="30"
                :disabled="row.uploadData.onoff === null || row.uploadData.onoff === 0">
              </el-input-number> ℃
            </template>
          </el-table-column>
          <el-table-column prop="tempStatus" label="开关" width="140">
            <template slot-scope="scope">
              <el-switch
                @click.native.stop="changeSwitch(scope.row)"
                v-model="scope.row.uploadData.onoff"
                :active-value="true"
                :inactive-value="false"
                active-color="#13ce66"
                active-text="开"
                inactive-text="关"
                inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="showDeviceDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 卡片 -->
      <section class="wrapper" v-if="ListOrCard === 'card'">
        <el-row class="itemRow" :gutter="20" v-if="tableData && tableData.length">
          <el-col :span="8" v-for="(item,index) in tableData" :key="index">
            <div class="grid-content bg-purple" :id="index">
              <el-card class="box-card cardBorder">
                <img src="~@/assets/images/login2/clip.svg" class="svg"/>
                <!-- 上部分 -->
                <div class="cardTop">
                  <div class="device">
                    <div class="deviceWrapper">
                      <p class="deviceItem">
                        <span :style="{ background: setColor()}" class="circle1"> </span>
                        <span style="margin-left: 10px;">设备{{deviceStatusEnum[item.deviceState]}}</span>
                      </p>
                    </div>
                    <div class="deviceWrapper">
                      <p class="deviceItem" style="margin-top: 5px;">
                        <span class="circle2"> </span>
                        <el-tooltip class="item" effect="dark" :content="item.deviceName" placement="right">
                          <span class="deviceNameCss" style="margin-left: 10px;">{{item.deviceName}}</span>
                        </el-tooltip>
                      </p>
                      <div class="deviceSwitch" v-if="hasControl">
                        <el-switch
                          @click.native.stop="changeSwitch(item)"
                          v-model="item.uploadData.onoff"
                          :active-value="1"
                          :inactive-value="0"
                          active-color="#13ce66"
                          active-text="开"
                          inactive-text="关"
                          inactive-color="#ff4949">
                        </el-switch>
                      </div>
                    </div>
                  </div>
                  <div class="temp-ctrl">
                    <div class="temp-ctrl-wrap">
                      <div class="temp-ctrl-item">
                        <el-switch
                          v-model="item.uploadData.modeMap"
                          @change="handleTemCtrl(item, 'temp')"
                          active-color="#13ce66"
                          active-text="制热"
                          inactive-text="制冷"
                          inactive-color="#ff4949"
                          :disabled="item.uploadData.onoff === null || item.uploadData.onoff === 0">
                        </el-switch>
                      </div>
                      <div class="temp-ctrl-item">
                        温度
                        <el-input-number
                          size="mini"
                          v-model="item.uploadData.temp"
                          controls-position="right"
                          @change="handleTemCtrl(item, 'tempValue')"
                          :min="item.uploadData.modeMap ? 23 : 18"
                          :max="item.uploadData.modeMap ? 28 : 25"
                          :disabled="item.uploadData.onoff === null || item.uploadData.onoff === 0">
                        </el-input-number> ℃
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 分割线 -->
                <p class="lineCss"></p>
                <!-- 下部分 -->
                <div class="cardBottom">
                  <div class="itemAttr" v-for="(val,key,index) in item.content" :key="index">
                    <i class="el-icon-location items itemI" style="margin-right: 4px;"></i>
                    <p class="itemText">&nbsp;
                      {{ attrEnum[key]}} : <span :style="listFormatter(val, key)[0] ? { color: 'red'} : {}">{{ listFormatter(val, key)[1] }}</span>
                    </p>
                  </div>
                </div>
                <!-- 详情按钮 -->
                <div style="text-align: center; margin-top: 10px;">
                  <el-button type="text" @click.stop="showDeviceDetail(item)">查看详情</el-button>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
        <el-empty v-else description="暂无数据"></el-empty>
      </section>

      <el-pagination
        style="text-align: right"
        class="paginationCss"
        v-if="tableData.length > 0"
        layout="total, prev, pager, next"
        @current-change="changePage"
        :current-page="queryParams.current"
        :page-size="queryParams.pageSize"
        :total="totalCount"
      ></el-pagination>
    </el-card>

    <!-- 设备详情对话框 -->
    <el-dialog title="设备详情" :visible.sync="detailDialogVisible" width="60%">
      <div v-if="currentDevice">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="设备编号">{{ currentDevice.deviceNo }}</el-descriptions-item>
          <el-descriptions-item label="设备名称">{{ currentDevice.deviceName }}</el-descriptions-item>
          <el-descriptions-item label="设备地址">{{ currentDevice.deviceAddress }}</el-descriptions-item>
          <el-descriptions-item label="在线状态">{{ deviceStatusEnum[currentDevice.status] }}</el-descriptions-item>

          <!-- 控制参数 -->
          <el-descriptions-item label="开关状态">
            <el-switch
              v-model="currentDevice.uploadData.onoff"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="togglePower">
            </el-switch>
          </el-descriptions-item>

          <el-descriptions-item label="当前温度">
            <el-input-number
              v-model="currentDevice.uploadData.temp"
              :min="16"
              :max="30"
              controls-position="right"
              style="width: 100px"
              @change="adjustTemperature"
              :disabled="currentDevice.uploadData.onoff === null || currentDevice.uploadData.onoff === 0">
            </el-input-number> ℃
          </el-descriptions-item>

          <el-descriptions-item label="风速">
            <el-select
              v-model="currentDevice.uploadData.wind"
              @change="adjustWindSpeed"
              placeholder="请选择风速"
              :disabled="currentDevice.uploadData.onoff === null || currentDevice.uploadData.onoff === 0">
              <el-option
                v-for="(label, value) in windSpeedMap"
                :key="value"
                :label="label"
                :value="Number(value)">
              </el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item label="模式">
            <el-select
              v-model="currentDevice.uploadData.mode"
              @change="adjustMode"
              placeholder="请选择模式"
              :disabled="currentDevice.uploadData.onoff === null || currentDevice.uploadData.onoff === 0">
              <el-option
                v-for="(label, value) in modeMap"
                :key="value"
                :label="label"
                :value="Number(value)">
              </el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item label="风向">
            <el-select
              v-model="currentDevice.uploadData.wards"
              @change="adjustWards"
              placeholder="请选择风向"
              :disabled="currentDevice.uploadData.onoff === null || currentDevice.uploadData.onoff === 0">
              <el-option
                v-for="(label, value) in wardsMap"
                :key="value"
                :label="label"
                :value="Number(value)">
              </el-option>
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item label="继电器状态">
            <el-tag :type="currentDevice.uploadData.relay === 1 ? 'success' : 'danger'">
              {{ currentDevice.uploadData.relay === 1 ? '开启' : '关闭' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="当前电流">
            {{ currentDevice.uploadData.current }} A
          </el-descriptions-item>
          <el-descriptions-item label="当前功率">
            {{ currentDevice.uploadData.power }} W
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>

    <!-- 集中控温弹窗 -->
    <el-dialog
      :visible.sync="temperatureDialogVisible"
      width="400px"
      :show-close="false"
      center
    >
      <section class="temperature">
        <el-switch
          @click.stop.native="()=>{}"
          @change="handleTemperatureCtrl('temp')"
          v-model="temperatureCtrl"
          active-color="#13ce66"
          active-text="制热"
          inactive-text="制冷"
          inactive-color="#ff4949">
        </el-switch>
        <div class="temperature-num">
          温度
          <el-input-number
            size="mini"
            @click.stop.native="()=>{}"
            v-model="temperatureNum"
            controls-position="right"
            @change="handleTemperatureCtrl('tempValue')"
            :min="temperatureCtrl ? 23 : 18"
            :max="temperatureCtrl ? 28 : 25"
          ></el-input-number> ℃
        </div>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="temperatureDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleBatchTemperature">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
import {
  controlDevice,
  lamplightBeachDeviceControl,
  temperatureBatchControl,
  deviceCmdSend
} from './js/deviceStatistics.js'
import {getEquipmentListOne,} from '@/views/children/safety/js/device'
import historyData from './components/historyData.vue'
import {iconList, indicator, unitList} from './js/indicatorConstant'
import '@/styles/iconfont/iconfont.css'

export default {
  name: 'statistics',
  components: {
    historyData
  },
  data() {
    return {
      detailDialogVisible: false,
      currentDevice: null,
      windSpeedMap: {
        0: '自动风',
        1: '低风',
        2: '中风',
        3: '高风',
        4: '固定风'
      },
      modeMap: {
        0: '自动',
        1: '制冷',
        2: '抽湿',
        3: '制热',
        4: '送风'
      },
      wardsMap: {
        0: '扫风',
        1: '上下扫风',
        2: '左右扫风',
        3: '上下左右扫风'
      },
      activeName: '',
      queryParams: {
        current: 1,
        pageSize: 12000,
        typeId: '',
        deviceName: ''
      },
      typeName: '',
      autoDialogWidth: '',
      tabsList: [],
      totalCount: 1,
      ListOrCard: 'list',
      deviceTypeList: [],
      colorIndex: 0,
      deviceStatusList: [ // 1 告警 2 正常 3 离线
        {
          name: '正常',
          val: 0
        },
        {
          name: '告警',
          val: 1
        },
        {
          name: '离线',
          val: 2
        },
        {
          name: '损坏',
          val: 3
        }
      ],
      deviceStatusEnum: {
        0: '离线',
        1: '在线',
      },
      attrEnum: {},
      tableHeaders: [],
      hasControl: 0,
      control: '空调',
      controlRes: '',
      current: {},
      deviceControlMethod: '',
      tableData: [],
      visibleHistory: false,
      iconName: '',
      lamplightSwitch: '',
      checkSelection: [],
      temperatureDialogVisible: false,
      temperatureCtrl: true,
      temperatureNum: 23,
      seasonStatus: false
    }
  },
  async mounted() {
    await this.searchQuery()
  },
  methods: {
    // 搜索
    async searchQuery() {
      this.queryParams.current = 1
      await this.initData()
    },

    // 显示设备详情
    showDeviceDetail(row) {
      // 深拷贝设备数据，避免直接修改原始数据
      this.currentDevice = JSON.parse(JSON.stringify(row))
      // 确保uploadData存在
      if (!this.currentDevice.uploadData) {
        this.currentDevice.uploadData = {
          onoff: 0,
          temp: 26,
          wind: 0,
          mode: 0,
          wards: 0,
          relay: 0,
          current: 0,
          power: 0
        }
      }
      this.detailDialogVisible = true
    },

    // 切换电源状态
    async togglePower(newState) {
      if (!this.currentDevice) return

      const params = {
        payload: JSON.stringify({
          onoff: newState,
          rand: Math.floor(Math.random() * 100)
        }),
        deviceNo: this.currentDevice.deviceNo
      }

      try {
        const res = await this.sendControlCommand(params)
        if (res.code === 0) {
          // 更新本地状态
          if (this.currentDevice.uploadData) {
            this.currentDevice.uploadData.onoff = newState
          }
          // 同时更新表格中的状态
          const tableItem = this.tableData.find(item => item.deviceNo === this.currentDevice.deviceNo)
          if (tableItem && tableItem.uploadData) {
            tableItem.uploadData.onoff = newState
            tableItem.tempStatus = newState === 1
          }
          // 刷新列表数据
          await this.initData()
        }
      } catch (error) {
        console.error('切换电源状态失败:', error)
      }
    },

    // 调节温度
    async adjustTemperature(temp) {
      if (!this.currentDevice) return

      // 检查温度范围
      if (temp < 16 || temp > 30) {
        this.$message.warning('温度范围应在16-30之间')
        return
      }

      const params = {
        payload: JSON.stringify({
          temp: temp,
          rand: Math.floor(Math.random() * 100)
        }),
        deviceNo: this.currentDevice.deviceNo
      }

      try {
        const res = await this.sendControlCommand(params)
        if (res.code === 0) {
          if (this.currentDevice.uploadData) {
            this.currentDevice.uploadData.temp = temp
          }
          // 更新表格中的温度
          const tableItem = this.tableData.find(item => item.deviceNo === this.currentDevice.deviceNo)
          if (tableItem && tableItem.uploadData) {
            tableItem.uploadData.temp = temp
          }
          // 刷新列表数据
          await this.initData()
        }
      } catch (error) {
        console.error('调节温度失败:', error)
      }
    },

    // 调节风速
    async adjustWindSpeed(wind) {
      if (!this.currentDevice) return

      const params = {
        payload: JSON.stringify({
          wind: wind,
          rand: Math.floor(Math.random() * 100)
        }),
        deviceNo: this.currentDevice.deviceNo
      }

      try {
        const res = await this.sendControlCommand(params)
        if (res.code === 0) {
          if (this.currentDevice.uploadData) {
            this.currentDevice.uploadData.wind = wind
          }
          // 更新表格中的风速
          const tableItem = this.tableData.find(item => item.deviceNo === this.currentDevice.deviceNo)
          if (tableItem && tableItem.uploadData) {
            tableItem.uploadData.wind = wind
          }
          // 刷新列表数据
          await this.initData()
        }
      } catch (error) {
        console.error('调节风速失败:', error)
      }
    },

    // 调节模式
    async adjustMode(mode) {
      if (!this.currentDevice) return

      const params = {
        payload: JSON.stringify({
          mode: mode,
          rand: Math.floor(Math.random() * 100)
        }),
        deviceNo: this.currentDevice.deviceNo
      }

      try {
        const res = await this.sendControlCommand(params)
        if (res.code === 0) {
          if (this.currentDevice.uploadData) {
            this.currentDevice.uploadData.mode = mode
          }
          // 更新表格中的模式
          const tableItem = this.tableData.find(item => item.deviceNo === this.currentDevice.deviceNo)
          if (tableItem && tableItem.uploadData) {
            tableItem.uploadData.mode = mode
          }
          // 刷新列表数据
          await this.initData()
        }
      } catch (error) {
        console.error('调节模式失败:', error)
      }
    },

    // 调节风向
    async adjustWards(wards) {
      if (!this.currentDevice) return

      const params = {
        payload: JSON.stringify({
          wards: wards,
          rand: Math.floor(Math.random() * 100)
        }),
        deviceNo: this.currentDevice.deviceNo
      }

      try {
        const res = await this.sendControlCommand(params)
        if (res.code === 0) {
          if (this.currentDevice.uploadData) {
            this.currentDevice.uploadData.wards = wards
          }
          // 更新表格中的风向
          const tableItem = this.tableData.find(item => item.deviceNo === this.currentDevice.deviceNo)
          if (tableItem && tableItem.uploadData) {
            tableItem.uploadData.wards = wards
          }
          // 刷新列表数据
          await this.initData()
        }
      } catch (error) {
        console.error('调节风向失败:', error)
      }
    },

    // 发送控制命令
    async sendControlCommand(params) {
      try {
        const res = await deviceCmdSend(params)
        if (res.code === 0) {
          this.$message.success('操作成功！')
          return res
        } else {
          this.$message.error(res.msg)
          throw new Error(res.msg)
        }
      } catch (e) {
        this.$message.error('操作失败')
        throw e
      }
    },

    // 设备反控
    async controlDevice(methodName, params, type = null) {
      try {
        const res = await controlDevice(methodName, params)
        if (res.code === 0) {
          this.$message.success('操作成功！')
          if (!type) await this.initData()
        } else {
          this.$message.error(res.msg)
          if (!type) await this.initData()
        }
        return res
      } catch (e) {
        console.error('控制设备失败:', e)
        throw e
      }
    },

    // 列表数据获取
    async initData() {
      try {
        let res = await getEquipmentListOne(this.queryParams)
        if (res.code === 0) {
          this.tableData = res.data.records.map(item => {
            // 确保uploadData存在
            if (!item.uploadData) {
              item.uploadData = {
                onoff: 0,
                temp: 26,
                wind: 0,
                mode: 0,
                wards: 0,
                relay: 0,
                current: 0,
                power: 0
              }
            }
            // 初始化switch状态
            item.tempStatus = item.uploadData?.onoff === 1
            // 初始化温度控制状态
            if (!item.uploadData.modeMap) {
              this.$set(item.uploadData, 'modeMap', false)
            }
            if (!item.uploadData.num) {
              this.$set(item.uploadData, 'num', 18)
            }
            return item
          })
          this.totalCount = res.data.total
        }
      } catch (e) {
        console.error('初始化数据失败:', e)
      }
    },

    // 翻页
    async changePage(val) {
      this.queryParams.current = val
      await this.initData()
    },

    // 温度控制
    async handleTemCtrl(row, type) {
      let params = {}
      if (type === 'temp') {
        // 制热/制冷
        params = {
          payload: JSON.stringify({
            mode: row.uploadData.modeMap ? 3 : 1, // 3:制热, 1:制冷
            rand: Math.floor(Math.random() * 100)
          }),
          deviceNo: row.deviceNo
        }
      } else if (type === 'tempValue') {
        // 温度值
        params = {
          payload: JSON.stringify({
            temp: row.uploadData.temp,
            rand: Math.floor(Math.random() * 100)
          }),
          deviceNo: row.deviceNo
        }
      }

      try {
        const res = await this.sendControlCommand(params)
        if (res.code === 0) {
          // 更新本地数据
          if (type === 'temp') {
            row.uploadData.modeMap = !row.uploadData.modeMap
          }
          // 刷新列表数据
          await this.initData()
        }
      } catch (error) {
        console.error('温度控制失败:', error)
      }
    },

    // 开关控制
    async changeSwitch(row) {
      const newState = row.uploadData.onoff ? 1 : 0
      const params = {
        payload: JSON.stringify({
          onoff: newState,
          rand: Math.floor(Math.random() * 100)
        }),
        deviceNo: row.deviceNo
      }

      try {
        const res = await this.sendControlCommand(params)
        if (res.code === 0) {
          row.uploadData.onoff = newState
          row.tempStatus = newState === 1
          // 刷新列表数据
          await this.initData()
        }
      } catch (error) {
        console.error('开关控制失败:', error)
        // 恢复原始状态
        row.uploadData.onoff = newState === 1 ? 0 : 1
        row.tempStatus = row.uploadData.onoff === 1
      }
    },

    // 以下方法保持与新代码一致
    async handleLamplightSwitch() {
      if (!this.checkSelection?.length) {
        this.$message.warning('请先勾选！')
        this.lamplightSwitch = ''
        return false
      }
      const params = this.checkSelection.map(n => ({
        colorTemperature: n.content.colorTemperature || 0,
        light: n.content.light || 0,
        commandId:
          n.deviceName === '黑板灯' && this.lamplightSwitch === 1002
            ? 1005
            : n.deviceName === '黑板灯' && this.lamplightSwitch === 1003
              ? 1006
              : this.lamplightSwitch,
        id: n.deviceNumber
      }))
      try {
        const res = await lamplightBeachDeviceControl(params)
        if (res.code === 0) {
          this.$message.success('灯光控制成功！')
          await this.initData()
        }
      } catch (e) {
        console.error('灯光控制失败:', e)
      }
    },

    handleSelectionChange(val) {
      this.checkSelection = val
    },

    handleBatchTemp() {
      if (!this.checkSelection?.length) {
        this.$message.warning('请先勾选！')
        return false
      }
      this.temperatureDialogVisible = true
    },

    async handleBatchTemperature() {
      const params = this.checkSelection.map(n => ({
        downLinkType: 0,
        openOrOff: this.temperatureNum,
        serialNumber: n.deviceNumber,
        temperatureControlFlag: this.temperatureCtrl ? 1 : 0
      }))
      try {
        const res = await temperatureBatchControl(params)
        if (res.code === 0) {
          this.temperatureDialogVisible = false
          this.$refs.tableRef.clearSelection()
          this.tableData.forEach(n => {
            params.forEach(m => {
              if (m.serialNumber === n.deviceNumber) {
                n.uploadData.modeMap = !!m.temperatureControlFlag
                n.uploadData.temp = m.openOrOff
              }
            })
          })
          this.$message.success('集中控温成功！')
          await this.initData()
        }
      } catch (e) {
        console.error('批量控温失败:', e)
      }
    },

    handleTemperatureCtrl(type) {
      if (type === 'temp') {
        this.temperatureNum = this.temperatureCtrl ? 23 : 18
      }
    },

    formatter(row, column) {
      const [flagBad, value] = this.getFormatterData(row[column.property], column.property)
      return [flagBad, value]
    },

    listFormatter(val, key) {
      const [flagBad, value] = this.getFormatterData(val, key)
      return [flagBad, value]
    },

    getFormatterData(val, key) {
      const bad = indicator.find(n => n.indicator === key)?.bad
      const best = indicator.find(n => n.indicator === key)?.best
      let flagBad = val >= bad
      let flagGood = val >= best && val < bad
      let flagBest = val < best
      let flag = ''
      if (best) {
        flag = flagBad ? '差' : flagGood ? '良' : flagBest ? '优' : ''
      } else if (key === 'h2S_Rtd' || key === 'nh3_Rtd') {
        flag = flagBad ? '差' : '正常'
      }
      const unit = unitList.find(n => n.prop === key)?.unit ?? ''
      const value = val ? `${flag} ${val} ${unit}` : ''
      return [flagBad, value]
    },

    setColor() {
      return ['#92D21B', '#E86548', '#9B9B9B', '#FFA800'][this.colorIndex ?? 0] || '#92D21B'
    },

    setBodyParams(deviceNumber, commandId, light = null, colorTemperature = null) {
      return {
        downLinkType: 0,
        serialNumber: deviceNumber,
        beanName: '',
        information: {
          commandId,
          id: deviceNumber,
          light,
          colorTemperature
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.switch-wrap {
  display: flex;
  align-items: center;
}
.ellipsis {
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
.temperature {
  display: flex;
  flex-direction: column;
  align-items: center;
  &-num {
    margin-top: 20px;
  }
}
.tabs {
  display: inline-block;
}
.btns {
  border: 1px solid rgba(0, 0, 0, 0.1);
  height: 42px;
  display: flex;
  justify-content:space-between;
  align-items: flex-start;
  width: 161px;
}
.spanI {
  height: 38px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.listOrCard {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  width: 79px;
}
.activeBackground {
  background-color:#D4FFF1;
}
/deep/ .el-button {
  border-radius: 0;
}
/deep/ .el-form-item__content {
  width: 100%;
}
.bg-purple {
  width: 100%;
  background-color: rgba(204, 204, 204, 0.2);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.cardBorder {
  border-radius: 10%;
  margin: 10px;
  ::v-deep .el-card__body {
    padding: 20px;
  }
}
/deep/ .el-card {
  border-radius: 12px !important;
}
.svg {
  position: absolute;
  right: 16px;
  top: 4px;
  width: 30px;
  height: 30px;
}
.cardTop {
  width: 100%;
  display:flex;
  height: 150px;
}
.device {
  margin-left: -24px;
  display:flex;
  flex-direction:column;
}
.deviceWrapper {
  padding: 0 10px;
  width: 100%;
  background-color: rgba(204, 204, 204, 0.2);
  border-radius: 10px;
  margin-bottom: 5px;
}
.light-ctrl {
  margin-right: -24px;
  &-wrap {
    text-align: right;
    .light-ctrl-item {
      margin-bottom: 5px;
      background-color: rgba(204, 204, 204, 0.2);
      padding-left: 10px;
      border-radius: 10px;
      & > .el-input-number {
        margin-left: 5px;
      }
    }
  }
}
.temp-ctrl {
  margin-right: -20px;
  &-wrap {
    text-align: right;
    .temp-ctrl-item {
      margin-bottom: 5px;
      background-color: rgba(204, 204, 204, 0.2);
      padding-left: 10px;
      border-radius: 10px;
    }
  }
}
.deviceItem {
  height: 26px;
  line-height: 26px;
  font-size:12px;
  position: relative;
}
.circle1 {
  display: inline-block;
  position: absolute;
  top:40%;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: #FF8F1F;
}
.deviceSwitch {
  text-align:center;
  margin-bottom: 3px;
}
.deviceNameCss{
  white-space: nowrap;
  display: inline-block;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 0.9;
}
.img {
  margin: 0 10px;
  display: inline-block;
  .imgWrapper {
    text-align: center;
    color: #92D21B;
  }
}
.w60 {
  font-size: 60px;
}
.w80 {
  font-size: 80px;
}
.lineCss {
  margin-top: 20px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.2);
  width: 100%;
}
.greenItem {
  background-color: green;
}
.blueItem {
  background-color:blue;
}
.items {
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  font-size: 14px;
  color: #ffffff;
}
.cardBottom {
  margin-top: 10px;
  display: flex;
  justify-content:space-between;
  align-items: flex-start;
  min-height: 60px;
  flex-wrap: wrap;
  .itemAttr {
    width: 50%;
  }
}
.itemI {
  background-color:green;
}
.itemII {
  background-color:blue;
}
.itemIII {
  background-color:orange;
}
.itemText {
  display: inline-block;
}
.el-input-number {
  width: 100px;
}

/* 详情对话框样式 */
.el-dialog__body {
  padding: 20px;
}
.el-descriptions {
  margin-bottom: 20px;
}
.el-tag {
  margin-right: 5px;
}

/* 下拉选择框样式 */
.el-select {
  width: 100%;
}
</style>

<style scoped>
.circle1,.circle2{
  display: inline-block;
  position: absolute;
  top:40%;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: #FF8F1F;
}
.circle2 {
  background-color: #00B578;
}
</style>
